<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Registro</title>
		<link rel="stylesheet" type="text/css" href="css/beequizz.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	
		
	</head>
	<body>
	
		<!-- JQuery -->
		<script src="../jquery/js/jquery-1.9.1.js"></script>
		<!-- UI JQuery -->
		<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
		<script   src="../jquery/js/beequizz.js"></script> 
	
		<div id="contenedorTotal">
			<header id="cabecera" >
				<div id="logo">
				<img style="float: left;" "alt="toto" src="img/logoBeequizz.jpg">
				
				<br>
				
				<h1 style="padding-top: 5% "> BeeQuizz </h1>
				<br>
				<h3 style="text-align: center">Una nueva forma de evaluacion</h3>
				</div>
			</header>
			<br/><br/><br/><br/><!--HACER UN DIV SOLO EN BLANCO PARA QAUI  -->
			<div id="registro" >
			
				<form method="post" id="formulario"  class="form-inline">
					<div class="form-group">
						<label class="sr-only" for="nombreUsuario">Nombre</label>
					    <input type="text" name ="nombre" class="form-control" id="nombreUsuario" placeholder="Nombre">
					</div>
					<br>
					<div class="form-group">
						<label class="sr-only" for="apellidosUsuario">Apellidos</label>
						<input type="text" name="apellidos" class="form-control" id="apellidosUsuario" placeholder="Apellidos">
					</div>
					<br>
					<div class="form-group">
						<label class="sr-only" for="login">Usuario</label>
						<input type="text"  name="apodo" class="form-control" id="login" placeholder="Usuario">
					</div>
					<br>
					<div class="form-group">
						<label class="sr-only" for="emailUsuario">Email</label>
					    <input type="email" name="mail" class="form-control" id="emailUsuario" placeholder="Introducir email">
					</div>
					<br>
					<div class="form-group">
						<label class="sr-only" for="contraseña">Password</label>
						<input type="password" name="password" class="form-control" id="contraseña" placeholder="Contraseña">
					</div>
					<br>
					<button type="submit" class="btn btn-default">Entrar</button>
				
				</form>
			
			</div>	
		</div>
		
	<div >  </div>
	
	<script>

	
	/* // validate signup form on keyup and submit
	$("form").validate({
	    rules: {
	        contraseña: {
	            required: true,
	            minlength: 5
	        },
	        confirmarContraseña: {
	            required: true,
	            minlength: 5,
	            equalTo: "#pass"
	        }
	    },
	    messages: {
	        contraseña: {
	            required: "Please provide a password",
	            minlength: "Your password must be at least 5 characters long"
	        },
	        confirmarContraseña: {
	            required: "Please provide a password",
	            minlength: "Your password must be at least 5 characters long",
	            equalTo: "Please enter the same password as above"
	        }
	    }
	});
	 */
	 
	 $.fn.serializeObject = function() {
			var o = {};
			var a = this.serializeArray();
			$.each(a, function() {
				if (o[this.name] !== undefined) {
					if (!o[this.name].push) {
						o[this.name] = [ o[this.name] ];
					}
					o[this.name].push(this.value || '');
				} else {
					o[this.name] = this.value || '';
				}
			});

			return o;
		};
		
		
		// Para hacer el submit del formulario
		 $('form').submit(function(event) {
			 
			 
			var data = JSON.stringify($('form').serializeObject());
			$.ajax({
	               type: "POST",
	                url: "../dispatcher/usuario/nuevoUsuario",
	                data: data,
	                beforeSend: function(xhr) {  
	                    xhr.setRequestHeader("Accept", "application/json");  
	                    xhr.setRequestHeader("Content-Type", "application/json");  
	                },  
	                success: function (datos) {
	                        alert("Funciona :-)");
	                },
	                error : function (data, status, er) {
	                	alert("error" + data + " status " +status+" er:"+er );
	                }
	            }); 
		}); 
	
	</script>
	</body>
</html>